Jquery para principianes

Contenido
JQUERY
AJAX ENVIAR FORMULARIOS SIN RECARGAR
ACTUALIZAR UN ELEMENTO SIN RECARGAR
COMBOS DEPENDIENTES AJAX BASE DE DATOS
STAR RATING JQUERY SIN BASE DE DATOS
STAR RATING JQUERY PLUGIN
DROPDOWN MENU DESPLEGABLE
ENVIA CORREOS SIN RECARGAR
PANEL DE IMAGENES CAROUSEL
INTERCAMBIO DE ELEMENTOS ENTRE 2 LISTAS
RECARGAR TEXTO AUTOMATICAMENTE
AGREGAR GRAFICOS ESTADISTICOS PIE
VALIDAR FORMULARIOS
INCLUIR TOOLTIP EN MAPA DE IMÁGENES
SUBIR MULTIPLES ARCHIVOS
WEB MODULAR PHP
SLIDER CONTENIDO DESTACADO
VENTANA MODAL
AGREGAR BORRAR CAMPOS
MODIFICANDO ATRIBUTOS
JQUERY MUSIC PLAYER
OCULTAR /MOSTRAR SECCIONES DE NUESTRO SITIO

JQUERY
jQuery es una biblioteca o framework de Javascript, creada inicialmente por John Resig, que permite
simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos,
desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. Fue presentada el
14 de enero de 2006 en el BarCamp NYC.

jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la licencia MIT y de la
GNU General Public License, Versión 2.1 jQuery, al igual que otras bibliotecas, ofrece una serie de
funcionalidades basadas en Javascript que de otra manera requerirían de mucho más código. Es decir,
con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

Las empresas Microsoft y Nokia anunciaron que incluirán la biblioteca en sus plataformas.2Microsoft la
añadirá en su IDE Visual Studio3 y la usará junto con los frameworks ASP.NET AJAX y ASP.NET MVC,
mientras que Nokia los integrará con su plataforma Web Run-Time.

Características

Selección de elementos DOM.

Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de
XPath.

Eventos.

Manipulación de la hoja de estilos CSS.

Efectos y animaciones.

AJAX.

Soporta extensiones.

Utilidades varias como obtener información del navegador, operar con Objetos y Arrays, función trim()
(elimina los espacios en blanco del principio y final de una cadena de caracteres), etc.

Compatible con los navegadores Firefox 2.0+, Internet Explorer 6+, Safari 2.0.2+, Opera 9+ y Google
Chrome.

AJAX ENVIAR FORMULARIOS SIN RECARGAR

Como verás a continuación el formulario no tiene nada de especial, es igual que cualquier otro, además
hay un div con el id “result” que es donde mostraremos el resultado de lo que enviemos.

1 <form method="post" action="envio.php" id="fo3" name="fo3" >
2 <fieldset>
3 <legend>Perfil</legend>
4 <ol>
5 <li><label>Nombres:</label><input type="text" size="30" name="fnombres" /></li>
6 <li><label>Apellidos:</label><input type="text" size="30" name="fapellidos" /></li>
7 <li><label>Correo:</label><input type="text" size="30" name="fcorreo" /></li>
8 </ol>
9 <input type="submit" name="mysubmit" value="Enviar" />
10 </fieldset>
11 </div>
12 </form>
13 <div id="result"></div>

Implementando AJAX
Ahora viene la parte novedosa del script, jquery intercepta el evento submit y envía el formulario sin
recargar la página.

1 <script language="javascript" src="jquery-1.3.min.js"></script>
2 <script language="javascript">
3 $(document).ready(function() {
4 // Esta primera parte crea un loader no es necesaria
5 $().ajaxStart(function() {
6 $('#loading').show();
7 $('#result').hide();
8 }).ajaxStop(function() {
9 $('#loading').hide();
10 $('#result').fadeIn('slow');
11 });
12 // Interceptamos el evento submit
13 $('#form, #fat, #fo3').submit(function() {
14 // Enviamos el formulario usando AJAX
15 $.ajax({
16 type: 'POST',
17 url: $(this).attr('action'),
18 data: $(this).serialize(),
19 // Mostramos un mensaje con la respuesta de PHP
20 success: function(data) {
21 $('#result').html(data);
22 }
23 })
24 return false;
25 });
26 })
27 </script>

ACTUALIZAR UN ELEMENTO SIN RECARGAR

Ahora que está muy de moda la web, muchos aplicaciones requieren por rapidez y estética se recarguen
elementos, que aparezcan mensajes, etc y todo sin recargar la página para eso se puede usar
complicados y confusos códigos AJAX o DOM pero es preferible usar un método más simple con Jquery.

Actualizar Un Elemento Sin Recargar Usando AJAX
Para eso vamos a crear DIV con el id “recargado” donde vamos a llamar el resultado de un archivo PHP,
que podría ser la invocación a una base de datos, un mensaje, validación, prácticamente cualquier cosa
que haga PHP y por supuesto sin recargar la página

1 <div id="recargado">Mi texto sin recargar</div>
2 <p align="center">
3 <a href="#" onclick="javascript:recargar();">recargar</a>
4 </p>

Implementando JQUERY
Luego de incluir la libreria jquery
1 <script language="javascript" src="js/jquery-1.2.6.min.js"></script>

Escribimos nuestro código que se ejecutará cuando demos click al link “recargar”
2 function recargar(){
3 /// Aqui podemos enviarle alguna variable a nuestro script PHP
4 var variable_post="Mi texto recargado";
5 /// Invocamos a nuestro script PHP

6 $.post("miscript.php", { variable: variable_post }, function(data){
7 /// Ponemos la respuesta de nuestro script en el DIV recargado
8 $("#recargado").html(data);
9 });
10 }
11 </script>

COMBOS DEPENDIENTES, AJAX + BASE DE DATOS

¿Cómo Me Conecto A La Base De Datos?
Lo primero es conectarnos a la base de datos y buscar el elemento seleccionado en el combo y según
eso llenar el otro combo por una cuestión de comodidad voy a usar una clase que se encargue de dicha
conexión, puedes descargarla y ver cómo funciona aquí

¿Cómo Busco Los Datos?
Para eso hay que usar una consulta sql como esta:
“SELECT * FROM ciudad WHERE pais_id LIKE „$_POST[elegido]„”
La consulta obviamente varía de acuerdo a nuestra base de datos, para este ejemplo estamos usando
una base de datos con las tablas continente, pais y ciudad

Combo1.Php Y Combo2.Php
El script para ambos similar, lo único que varía es la consulta sql
1 <?php
2 // Incluimos la configuración de la conexión de base de datos
3 include("includes/config.inc.php");
4 include("includes/mysql.class.php");
5 // Creamos la conexión
6 $db = new MySQL();
7 // Abrimos la conexión
8 $db->open();
9 // Ejecutamos la consulta sql
10 $consulta = $db->consulta("SELECT * FROM pais WHERE continente_id LIKE '$_POST[elegido]'");
11 // Creamos un array para mostrar los datos del combo
12 if ($row = $db->fetch_array($consulta)) {
13 do {
14 echo
15 '<option value="'.$row['pais_id'].'">'.$row['pais_name'].'</option>';
16 }while($row = $db->fetch_array($consulta));
17 }
18 ?>

STAR RATING SIN BASE DE DATOS 1
Para la parte del css nos hemos basado en el código de Komodo Media, el cual pueden encontrar aqui
Lo interesante de este script es que se usa jquery y se guarda la votación en un archivo de texto y así ya
no se requiere una base de datos.

El Diseño
Las instrucciones detalladas las pueden encontrar en Komodo Media, así que nos limitaremos a copiar el
código del formulario.

1 <form name="frm_rating" method="post" action="index.php">
2 <ul class='star-rating'>
3 <li class='current-rating' style='width:<?php echo 25 * round($promedio);?>px;'>Currently 3.5</li>
4 <li class="star"><a href='#' title='1' class='one-star'>1</a></li>
5 <li class="star"><a href='#' title='2' class='two-stars'>2</a></li>
6 <li class="star"><a href='#' title='3' class='three-stars'>3</a></li>
7 <li class="star"><a href='#' title='4' class='four-stars'>4</a></li>
8 <li class="star"><a href='#' title='5' class='five-stars'>5</a></li>
9 <li class="star"><a href='#' title='6' class='six-stars'>6</a></li>
10 </ul>
11 <input type="hidden" name="my_vote" value="0" id="my_vote" />
12 <input type="submit" name="submit" value="Votar" />
13 </form>

La hoja de estilos y el grafico de las estrellas lo encuentran en el archivo zip al final del tutorial.

AJAX
Ahora necesito que cuando se le de click a una estrella, esta se marque y el valor del campo hiddden
“my_vote” se modifique, para eso voy a hacer un simple javascript invocando mi libreria jquery:

1 <script language="javascript" src="jquery-1.2.6.min.js"></script>
3 $(document).ready(function(){
4 // Detecto la estrella que es presionada
5 $("li.star a").click(function(event){
6 // Recojo el valor de la estrella
7 valor_actual=$(this).attr("title");
8 // Cambio el estilo para mostrar la estrella seleccionada
9 $("li.current-rating").css("width", valor_actual*25);
10 // Cambio el valor del campo hidden
11 $("#my_vote").attr("value", valor_actual);
12 });
13 });
14 </script>

Ya tenemos las estrellas, también se marcan las estrellas, ahora nos falta guardar la votación
<h2>Guardar la votación</h2>

Para eso debemos crear un archivo llamado datos.txt y deben asegurarnos que sea escribible, el código
php requerido es:

1 // Verificamos si se ha votado
2 if (isset($_POST['my_vote'])) {
3 Abrimos el archivo datos.txt
4 $filename = 'datos.txt';
5 // Capturamos el valor del voto
6 $somecontent = $_POST['my_vote']."n";
7 // Verificamos que nuestro archivo sea escribible
8 if (!$handle = fopen($filename, 'a')) {
9 echo "Cannot open file ($filename)";
10 exit;
11 }
12 // Escribimos $somecontent en nuestro archivo
13 if (fwrite($handle, $somecontent) === FALSE) {
14 // Marcamos error de escritura
15 echo "Cannot write to file ($filename)";
16 exit;
17 }
18 // El archivo se escribio correctamente y lo cerramos
19 fclose($handle);
20 }
21 //abro el archivo para lectura
22 $archivo = fopen ("datos.txt", "r");
23 $num_lineas = 0;
24 while (!feof ($archivo)) {
25 // Leo linea por linea las votaciones pasadas
26 if ($linea = fgets($archivo)){
27 // Guardo la cantidad de votaciones y sus valores
28 $num_lineas++;
29 $valores[$num_lineas]=$linea;
30 }
31 }
32 fclose ($archivo);
33 //print_r($valores);
34 // Calculo el total
35 $total=0;
36 for ($i=1; $i<j;=$num_lineas; $i++) {
37 $total=$total+$valores[$i];
38 }
39 // Hallo el promedio y lo redondeo
40 $promedio=$total/$num_lineas;
41 echo "total: ".round($promedio);
42 ?>;

STAR RATING JQUERY PLUGIN

Anteriormente vimos un star rating sin base de datos para sistemas pequeños, pero para sistemas más
grandes se recomienda usar este plugin jquery.

Basado en el simple star rating plugin jquery modificándolo para agregarle algunas características que
le hacían falta como son: que el rating reciba la respuesta usando ajax y que además se pueda enviar
como parámetro un id, esto es útil para guardar el voto en una base de datos e identificar por que item
estoy votando.

El código es muy simple de implementar, en el html pones:
1 <div id="star1" class="rating"> </div>
Y para el código javascript:
1 <script type="text/javascript">
3 $('#star1').rating('votar.php', {maxvalue: 5, curvalue:1, id:20});
4 });
5 </script>

¿Qué Significan Esos Parámetros?
votar.php es el nombre del script que va a capturar el voto usando POST
maxvalue: es la cantidad de estrellas
curvalue: es el valor actual (opcional)
id: es el identificador (opcional)

¿Cómo Funciona?
El valor seleccionado y el id (si es que lo hemos definido) son enviados al script votar.php (o al que
elijamos), en ese script podemos guardar el voto en una base de datos, los parametros son recibidos
como $_POST['rating'] y $_POST['id']

DROPDOWN MENU DESPLEGABLE AJAX

En esta parte crearemos un menú desplegable de múltiples niveles, es decir el menu, submenu, los
submenus de ese submenu y así sucesivamente y todo eso usando jquery.

Creando El Menu

Primero hay que definir el menu con sus respectivos submenu para eso voy a crear un grupo de ul y li
dentro un div contenedor llamado “menu”
1 <div id="menu">
2 <ul id="nav">
3 <li><a href="#">Inicio</a></li>
4 <li><a href="#">Servicios</a>
5 <ul class="submenu">
6 <li><a href="#">Marketing</a>
7 <ul class="subsubmenu">
8 <li><a href="#">Precios</a></li>
9 <li><a href="#">Consultas</a></li>
10 </ul>
11 </li>
12 <li><a href="#">Mercadotecnia</a></li>
13 <li><a href="#">Encuestas</a></li>
14 </ul>
15 </li>
16 <li><a href="#">Nosotros</a>
17 <ul class="submenu">
18 <li><a href="#">Vision</a></li>
19 <li><a href="#">Mision</a></li>
20 </ul>
21 </li>
22 <li><a href="#">Otros</a></li>
23 <li><a href="#">Contactanos</a></li>
24 </ul>
25 </div>

Jquery Para El Menu Ajax
Voy a usar una función muy sencilla que se va a encargar de mostrar los submenus
2 function mainmenu(){
3 // Oculto los submenus
4 $(" #nav ul ").css({display: "none"});
5 // Defino que submenus deben estar visibles cuando se pasa el mouse por encima
6 $(" #nav li").hover(function(){
7 $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);
8 },function(){
9 $(this).find('ul:first').slideUp(400);

10 });
11 }
13 mainmenu();
14 });
15 </script>

La Hoja De Estilos Del Dropdown
He diseñado una hoja de estilos que puedas modificar fácilmente tanto para el menu, submenu y en
segundo submenu pero recuerda que puedes crear cualquier cantidad de submenús

1 * { padding:0px; margin:0px; }
2 body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333; }
3 #menu {
4 background-image:url(nav_bg.png);
5 background-repeat:repeat-x;
6 height:30px; width:500px;
7 margin:auto; padding-left:70px; }
8 #nav { list-style:none; }
9 #nav li {
10 float:left; background-image:url(nav_li_bg.png);
11 background-repeat:no-repeat;
12 background-position:right; }
13 #nav li a {
14 display:block; padding:7px 10px;
15 text-decoration:none; color:#CCCCCC;
16 font-weight:bold;
17 }
18 #nav li a:hover { color:#FFFFFF; }
19 /* Submenu */
20 #nav ul.submenu {
21 border:1px solid #000000;
22 padding:5px; position:absolute;
23 list-style:none;
24 background-color:#333333;
25 }
26 #nav ul.submenu li {
27 float:none; background-image:none;
28 border-bottom:1px solid #999999;
29 width:200px;
30 }
31 /* Subsubmenu */
32 #nav ul.subsubmenu {
34 padding:5px; position:absolute;
35 list-style:none;
36 background-color:#333333;
37 margin-left:150px;
38 margin-top:-30px;
39 }
40 #nav ul.subsubmenu li {
41 float:none;
42 background-image:none;
43 border-bottom:1px solid #999999;
44 min-width:200px;
45 }

ENVIA CORREOS SIN RECARGAR
El formulario no tiene nada de especial, sólo debemos asegurarnos que tenga como id “myform”, además
necesitamos 2 divs en uno mostraremos el resultado y el otro nos servirá como loader.

1 <form method="post" action="envio.php" id="myform" name="myform" >
2 <fieldset id="form">
3 <legend>Send Email</legend>
4 <ol>
5 <li><label>Name:</label><input type="text" size="30" name="fname" /></li>
6 <li><label>E-mail:</label><input type="text" size="30" name="femail" /></li>
7 <li><label>Phone:</label><input type="text" size="30" name="fphone" /></li>
8 <li><label>Comments:</label><textarea name="fcomment" rows="5" cols="25"></textarea></li>
9 </ol>
11 <input type="submit" name="mysubmit" value="Enviar" />
12 </p>
13 </fieldset>
14 </div>
15 </form>
16 <div id="loading"></div>
17 <div id="result"></div>

Ajax Para El Envio Del Formulario
En este caso vamos a usar jquery para que envié los datos del formulario a envio.php, el cual a su vez
enviará un correo electrónico

1 <script language="javascript" src="jquery-1.3.min.js"></script>
4 // Mostramos el loader
5 $().ajaxStart(function() {
6 $('#loading').show();
7 $('#result').hide();
8 }).ajaxStop(function() {
9 $('#loading').hide();
10 $('#result').fadeIn('slow');
11 });
12 // Enviamos el formulario
13 $('#myform').submit(function() {
14 // Definimos el metodo ajax, los datos
15 $.ajax({
16 type: 'POST',
17 url: $(this).attr('action'),
18 data: $(this).serialize(),
19 success: function(data) {
20 // Imprimimos la respuesta en el div result
21 $('#result').html(data);
22
23 }
24 })
25
26 return false;
27 });
28 })
29 </script>

Envio.php
Ahora vamos a hacer el envió de un correo electrónico con los datos del formulario
1 <?
2 // definimos el mensaje

3 $mensaje="";
4 $mensaje.="Contact from:". "nn";
5 $mensaje.="Name: ".$_POST['fname']."n";
6 $mensaje.="E-mail: ".$_POST['femail']."n";
7 $mensaje.="Phone: ".$_POST['fphone']."n";
8 $mensaje.="Comments: ".$_POST['fcomment']."n";
9 // definimos a quien se lo enviamos
10 $email_destiny="mio@mail.com";
11 $subject="Message from us";
12 // verificamos si se envió
13 if (mail($email_destiny,$subject,$mensaje,"From: Contact<".$_POST['femail'].">")) {
14 echo '<p align="center"><b>Thanks for your comments</b></p>';
15 } else {
16 echo '<p align="center">Error '.$_POST['fname'].'</p>';
17 }
18 ?>

PANEL DE IMAGENES CAROUSEL JQUERY
Seguro hemos visto en varias páginas galerías de imagen con un scroll horizontal o vertical, no es
complicado diseñarlas usando ajax, y con la ayuda de jquery y un plugin llamado jcarousel.

La forma de implementarlo es sencilla, ya que el plugin se encarga de la mayoría de cosas

Implementación De La Galería
Probemos con el ejemplo más simple para implementar carousel
1 <ul id="mycarousel" class="jcarousel-skin-tango">
2 <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
3 <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
4 <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
5 <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
6 <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
7 <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
8 <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
9 <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
10 <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
11 <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
12 </ul>

Cada elemento del li es la imagen que vamos a mostrar en el carousel, también debemos fijarnos bien en
el id del ul y la clase

Jquery Ajax
Debemos llamar a jquery, el plugin y activarlo
1 <script type="text/javascript" src="../lib/jquery-1.2.3.pack.js"></script>
2 <script type="text/javascript" src="../lib/jquery.jcarousel.pack.js"></script>
4 jQuery(document).ready(function() {
5 jQuery('#mycarousel').jcarousel();
6 });
7 </script>

Estilos Del Carousel
El creador del plugin nos da algunos estilos para aplicarle a carousel que podemos cambiarlos a nuestro
gusto

1 <link rel="stylesheet" type="text/css" href="../lib/jquery.jcarousel.css" />
2 <link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />

INTERCAMBIO DE ELEMENTOS ENTRE 2 LISTAS

Este es un script que fácilmente puede modificarse para crear un carrito de compras, un sistema de
widgets como el de wordpress entre otras opciones. Realizaremos uno genérico para que sea de mas
fácil modificación.

Las Listas
El código de las listas no tiene nada especial, sólo debemos asegurarnos que los id sean correctos
1 <div id="demo-frame">
2 <ul id="lista1" class="gallery">
3 <li>Item1</li>
4 <li>Item2</li>
5 <li>Item3</li>
6 <li>Item4</li>
7 </ul>
8 <ul id="lista2">
9 <li>Item5</li>
10 <li>Item6</li>
11 <li>Item7</li>
12 </ul>
13 </div>

Estilo De Las Listas
Usaremos un estilo simple en las listas, haciéndolas flotar para que este una al lado de la otra además de
agregarle una altura mínima para cuando no tenga elementos la lista.

1 body {
2 color: #333333;
3 }
4 #lista1, #lista2 {
5 width:200px;
7 height:auto;
8 float:left;
9 margin-right:5px;
10 }

Jquery Para Las Listas
Ahora si vamos a la parte importante del código, básicamente lo que hay que hacer es que ambas listas
tengan activo dragable y acepten el drop de la otra lista; además debo hacer que al recibir el drop se
agregue el item correspondiente y se borre de la lista de donde proviene. Es posible añadir más opciones
como cambiar el estilo entre listas o que el item cambie de forma, etc. Todo es cosa de jugar un poco con
el código.

2 <script language="javascript" src="js/jquery-ui-personalized-1.6rc6.min.js"></script>
5 // para ahorrar un poco de espacio voy a definir a las listas como variables

6 var $lista1 = $('#lista1'), $lista2 = $('#lista2');
7 // Activo draggable a la primera lista
8 $('li',$lista1).draggable({
9 revert: 'invalid',
10 helper: 'clone',
11 cursor: 'move'
12 });
13 // asigno droppable en la lista1 hacia la lista2
14 $lista1.droppable({
15 accept: '#lista2 li',
16 drop: function(ev, ui) {
17 // Al hacer drop se borra el elemento
18 deleteLista2(ui.draggable);
19 }
20 });
21 // Asigno draggable a la lista2
22 $('li',$lista2).draggable({
23 revert: 'invalid',
24 helper: 'clone',
25 cursor: 'move'
26 });
27 // Genero droppable para la segunda lista
28 $lista2.droppable({
29 accept: '#lista1 > li',
30 drop: function(ev, ui) {
31 deleteLista1(ui.draggable);
32 }
33 });
34 // Genero el borrado de items con el evento drop
35 function deleteLista1($item) {
36 $item.fadeOut(function() {
37 // Agrego el item dropeado y lo hago aparecer
38 $($item).appendTo($lista2).fadeIn();
39 });
40 $item.fadeIn();
41 }
42 function deleteLista2($item) {
43 $item.fadeOut(function() {
44 /// Agrego el item dropeado y lo hago aparecer
45 $item.appendTo($lista1).fadeIn();
46 });
47 }
48 });
49 </script>
Y eso es todo el código para la forma más simple de intercambiar items entre listas, se le pueden añadir
muchas más opciones como nos muestra la documentación del Jquery UI

Sobre Jquery UI
Para el ejemplo he usado Jquery 1.3.1 y JqueryUI 1.6rc6, si deseas usar una versión de Jquery 1.6.x,
debes usar Jquery UI 1.5 de lo contrario no funcionará, la programación funciona en ambas versiones sin
ningún cambio eso por un cambio que hizo jquery en el manejo de eventos drag and drop.

RECARGAR TEXTO AUTOMATICAMENTE
Con la ayuda de jquery es muy fácil recargar un texto ya sea que lo invoquemos de una base de datos o
de un array, para este ejemplo voy a usar un array generado por un archivo PHP; y voy a usar un
set_interval de javascript para que se recargue automaticamente cada cierto tiempo.

El Html Para Recargar
Mi codigo html se limita a crear un div donde recargar el texto

1 <body>
2 <div id="recargado">Mi texto sin recargar</div>
3 </body>

El Javascript Para Recargar
3 function recargar(){
4 // Limita el contador a solo 5 elementos
5 if ($actual<=5) {
6 $actual=$actual+1;
7 } else {
8 $actual=1;
9 }
10 // Setea la variable que vamos a enviar a php
11 var variable_post=$actual;
12 // Enviamos los valores a miscript.php
13 $.post("miscript.php", { variable: variable_post }, function(data){
14 /// Actualizamos el div recargado
15 $("#recargado").html(data);
16 });
17 }
18 $actual=0;
19 // Establecemos el temporizador a 2 segundos
20 timer = setInterval("recargar()", 2000);
21 </script>

Miscript.Php
Este script puedes cambiarlo por una conexion de base de datos, para el ejemplo yo uso un simple array
con los mensaje
<?php
1
// Creo el array
2
$mensajes=array("0", "Mi primer mensaje", "2do mensaje", "un tercer mensaje", "cuarto Mensaje", "5to
3
mensaje");
4
// Busco el elemento seleccionado
5
$nro=$_POST['variable'];
6
// Muestro el mensaje
7
echo $mensajes[$nro];
8
?>

AGREGAR GRAFICOS ESTADISTICOS PIE
Existe un plugin para jquery que nos permite hacer gráficos de barras usando CANVAS,
puedes descargar el plugin de aqui recuerda que canvas aun no es soportado por IE, por lo que para
hacerlo compatible deberás usar una script.js que te permita usar Explorer Canvas para hacerlo
compatible.

El funcionamiento del script es muy sencillo, solo debes tener todos tus datos en una tabla y el plugin se
encarga del resto con una sola linea, además es posible elegir multiples estilos de gráficos pie, bar, área,
line, stacked bar.

Codigo Html De Los Graficos Estadisticos
Como ya dije solo debes ingresar tus datos mediante una tabla simple
1 <table id="dataTable" summary="Member Data from 2000 to 2006">
2 <caption>Member Data from 2000 to 2006</caption>
3 <thead>
4 <tr>
5 <td></td>
6 <th id="2000">2000</th>

7 <th id="2001">2001</th>
8 <th id="2002">2002</th>
9 <th id="2003">2003</th>
10 <th id="2004">2004</th>
11 </tr>
12 </thead>
13 <tfoot>
14
15 </tfoot>
16 <tbody>
17 <tr>
18 <th headers="members">Mary</th>
19 <td headers="2000">150</td>
20 <td headers="2001">160</td>
21 <td headers="2002">40</td>
22 <td headers="2003">120</td>
23 <td headers="2004">30</td>
24 </tr>
25 <tr>
26 <th headers="members">Tom</th>
27 <td headers="2000">3</td>
28 <td headers="2001">40</td>
29 <td headers="2002">30</td>
30 <td headers="2003">45</td>
31 <td headers="2004">35</td>
32 </tr>
33 <tr>
34 <th headers="members">Brad</th>
35 <td headers="2000">10</td>
36 <td headers="2001">00</td>
37 <td headers="2002">10</td>
38 <td headers="2003">85</td>
39 <td headers="2004">25</td>
40 </tr>
41 <tr>
42 <th headers="members">Kate</th>
43 <td headers="2000">40</td>
44 <td headers="2001">80</td>
45 <td headers="2002">90</td>
46 <td headers="2003">25</td>
47 <td headers="2004">15</td>
48 </tr>
49 </tbody>
50 </table>

Luego debes definir el espacio donde estará ubicado el canvas
1 <canvas id="chart1" class="fgCharting_src-dataTable_type-pie" width="400" height="400"></canvas>
Fijate bien en la clase ya que esta te permitirá elegir el tipo de grafico a representar, en los estilos también
asegurate de usar un tamaño de letra pequeño para el body ya que de lo contrario podría deformarse el
grafico.

AJAX – Jquery
Finalmente dibujamos el grafico estadistico con una sola linea de codigo
1 $.fgCharting();

VALIDAR FORMULARIOS
Siempre que hacemos un formulario, necesitamos un script de validación, el problema es siempre tener
un script que sea fácil de usar, lo suficientemente flexible para que funcione en cualquier formulario y que
sea personalizable, encuentralo justamente eso.

HTML De Formulario Para Validar
Solo debemos fijarnos bien en el id del formulario y para los campos que deseamos validar agregar una
clase required, email, etc
1 <form name="comentariosFrm" id="comentariosFrm" method="post" action="">
2 <ol>
3 <li>
4 <label>Nombre: (requerido al menos dos caracteres)</label>
5 <input id="cname" name="name" class="required" minlength="2" />
6 </li>
7 <li>
8 <label>E-mail: (requerido)</label>
9 <input id="cemail" name="email" class="required email" minlength="2" />
10 </li>
11 <li>
12 <label>Tu página web: (opcional)</label>
13 <input id="curl" name="url" class="url" value="" />
14 </li>
15 <li>
16 <label>Comentarios: (requerido)</label>
17 <textarea id="ccomentario" name="comentario" class="required"></textarea>
18 </li>
19 <p align="center"><input type="submit" name="submit" value="Enviar" /></p>
20 </ol>
21 </form>

Agregar El Validador
Primero debemos incluir la libreria jquery, el validador y con una sola línea de texto le decimos que
formulario validar
1 <script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
2 <script src="js/jquery.validate.min.js" type="text/javascript"></script>
5 $("#comentariosFrm").validate();
6 });
7 </script>

FLASHVARS ENVIARLE DATOS HTML A PELICULA FLASH
Hay veces que nos gustaría enviarle variables GET a nuestro flash, o enviarle datos desde html, esto se
logra usando flashvars las cuales se agregan en el embed de la pelicula flash, algo así como:
1 <object width="300" height="200">
2 <param name="movie" value="mipelicula.swf" />
3 <param name="FlashVars" value="var1=valor1&var2=valor2" />
4 <embed src="mipelicula.swf" width="300" height="200
5 FlashVars="var1=valor1&var2=valor2"/>
6 </object>

Usando Un Plugin Jquery
Existe una forma mucho más simple de insertar flash en nuestra página web, usando un plugin para
jquery basta crear un div y luego decirle, mete ahi nuestra película de este tamaño ¿Hay algo más
simple?

Su código html sería únicamente el div donde va a ir nuestra película

1 <div id="test-flash"></div>

El codigo javascript consiste en incluir nuestra libreria jquery, el plugin y un pequeño código para insertar
la película, adicionalmente le estoy enviando también flashvars
1 <script language="javascript" type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
2 <script language="javascript" type="text/javascript" src="js/jquery.flash.js"></script>
3 <script language="javascript" type="text/javascript">
5 $('#test-flash').flash({
6 src: 'test.swf',
7 width: 300,
8 height: 200,
9 flashvars: { var1: 'Mi variable var1', var2: 'Aqui la segunda' } // opcional
10 });
11 });
12 </script>
Puedes bajar el plugin de la página de su creador

Action Script Flash
Para capturar las variables que estamos enviando usamos el siguiente código en Action Script 2
1 mivariable1=_root.var1; // imprime "valor1"
2 mivariable2=_root.var2; // imprime "valor2"

INCLUIR TOOLTIP EN MAPA DE IMAGENES
Usando un plugin para jquery voy a explicar cómo colocar tooltips en un mapa de imagen.

HTML Del Mapa De Imagenes
Es prácticamente igual que cualquier mapa de imágenes, title es la descripción
2 <img src="mapa.gif" border="0" usemap="#mimapa" id="map" width="480" height="269" />
3 <map name="mimapa" id="mimapa">
4 <area shape="circle" coords="199,51,9" href="http://www.koblenz.de/" alt="" title="Toboganes" />
5 <area shape="circle" coords="169,53,9" href="http://www.wiesbaden.de/" alt="" title="Mamut" />
6 <area shape="circle" coords="137,28,9" href="http://www.mainz.de/" alt="" title="Pistas Blandas" />
7 <area shape="circle" coords="123,60,9" href="http://www.frankfurt.de/" alt="" title=" Tobogan Gigante" />
8 <area shape="circle" coords="88,24,9" href="http://www.mannheim.de/" alt="" title="Black Hole" />
9 <area shape="circle" coords="89,76,9" href="http://www.heidelberg.de/" alt="Heidelberg" title=" Cadetes" />
10 <area shape="circle" coords="83,97,9" href="http://www.stuttgart.de/" alt="" title=" Infantes" />
11 </map>
12 </p>

Agregar El Plugin
Para agregar jquery y el plugin bastan un par de líneas de código

1 <script language="javascript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
2 <script language="javascript" src="jquery.tooltip.min.js" type="text/javascript"></script>

Al plugin lo podemos configurar con una sola línea de código, pero yo voy a agregarle algunos detalles
adicionales
1 <script language="javascript" type="text/javascript">
2 $(function() {
3 $("map *").tooltip({
4 positionLeft: true,
5 delay: 0,
6 fade: 250,
7 extraClass: "pretty",
8 fixPNG: true,
9 opacity: 0.95,

10 });
11 });
12 </script>

Estilos Para El Tooltip
Estos varían según lo que queramos hacer, lo más importante es la position absolute y el z-index
1 #tooltip {
2 position: absolute;
3 z-index: 3000;
4 border: 1px solid #111;
5 background-color: #eee;
6 padding: 5px;
7 opacity: 0.85;
8 }
9 #tooltip h3, #tooltip div { margin: 0; }
10 #tooltip.pretty {
11 border: none;
12 width: 210px;
13 padding:20px;
14 height: 135px;
15 opacity: 0.8;
16 background: url('shadow.png');
17 }

SUBIR MULTIPLES ARCHIVOS

Siempre recordemos que no se puede subir archivos usando AJAX, porque el objeto ajax no soporta el
enctype requerido para subir archivos así que se usa un iframe para emular el proceso.

El Formulario Para Subir Archivos
12 <form action="upload.php" id="frm_uploader" name="frm_uploader" method="post" enctype="multipart/form-data">
3 <ol>
4 <li><label>Name:</label><input type="text" id="cfname" name="fname" size="30" class="required" /></li>
5 <li><label>E-mail:</label><input type="text" id="cfemail" name="femail" size="30" class="required email" /></li>
6 <li><label>Select Files</label>
7 <input name="ffoto[]" type="file" class="multi" accept="gif|jpg|jpeg|png|pdf|zip|rar|ai|eps|mp3|avi|wmv|mpg|mpeg|cdr" />
8 </li>
9 <li><p align="center"><input type="submit" name="submit" value="Upload Now" class="btn" /></p></li>
10 </ol>
11 </fieldset>
12 </form>

AJAX Jquery
Incluimos las librerias javascript, el script automáticamente buscará el campo con la clase multi
1 <script language="javascript" src="js/jquery-1.31.js"></script>
2 <script language="javascript" src="js/jquery.MultiFile.pack.js"></script>

PHP Para Recibir Los Archivos
Este script permite subir múltiples archivos como un array, así que empecemos por ahí
1 <?php
2 $cuales="";
3 /// Vemos cuantos archivos hemos subido
4 $nro=count($_FILES["ffoto"]["name"]);
5 /// Empezamos el array
6 for ($i=1; $i<$nro; $i++) {
7 $file_name=$_FILES["ffoto"]["name"][$i];
8 $file_size=$_FILES["ffoto"]["size"][$i];
9 $file_type=$_FILES["ffoto"]["type"][$i];
10 if($file_name!=""){

11 // verifica carpeta
12 $nombre_archivo=$_POST['femail'];
13 if (!file_exists('userfiles'.$nombre_archivo)) {
14 mkdir('userfiles/'.$nombre_archivo,0777);
15 }
16 $path="userfiles/".$nombre_archivo;
17 // sube archivo
18 copy($_FILES["ffoto"]['tmp_name'][$i], $path.'/'.$file_name) ;
19 echo '<p align="center">Your file <b>'.$file_name.'</b> was successfully uploaded</p>';
20 $cuales.=$file_name." ";
21 } else {
22 echo '<br><br><p align="center"><b>Error with '.$file_name.'</b></p>';
23 }
Puedes decargar este plugin jquery y ver mas ejemplos desde la pagina de su creador

WEB MODULAR PHP
Cosas tan simples como tener un flash con música en la página web y que esta no se corte cuando
cambie de página para lograr esto hay que evitar que se recargue la pagina, lo que se puede lograr
usando iframes sin embargo esta solución implica utilizar una tecnología antigua, y lo inconveniente que
es usar frames para el diseño.

En vista de esto, existe esta opción AJAX, para ser más preciso jquery.

Web Modular
La web modular se basa en varios pedazos de código que se juntan (encabezado, menu, contenido, pie
de pagina), eso ya lo expliqué en un post anterior.

Cargar Los Contenidos Sin Recargar
Aqui va la parte interesante, hay que hacer que los links llamen contenidos via ajax (jquery), lo que se
logra primero agregando a cada link la clase ajaxmenu
1 <a href="pages/homepage.php" class="ajaxmenu">Homepage</a>  |  
2 <a href="pages/aboutus.php" class="ajaxmenu" >About Us</a>  |  
3 <a href="pages/services.php" class="ajaxmenu" >Services</a>  |  
4 <a href="pages/contactus.php" class="ajaxmenu" >Contact Us</a>

y agregando este código al top_page.php dentro del header y entre etiquetas script
2 $.ajaxSetup ({
3 cache: false
4 });
5 //// Imagen mientras carga el contenido
6 var ajax_load = "<img src='img/load.gif' alt='loading...' />";
7
8 // Interceptar el link de los menus
9 $(".ajaxmenu").click(function(){
10 /// Extraemos el nombre de la pagina que esta en el link
11 var loadUrl = $(this).attr('href');
12 /// Llamamos el contenido
13 $("#contenido").html(ajax_load).load(loadUrl);
14 return false;
15 });
16 });

Hacer Funcionar Ajax En Links Internos
Ese código funciona con el menú pero para que funcione incluso en links de páginas cargadas usando
AJAX debemos usar el evento LIVE de jquery para ello basta modificar una línea de código.
1 $('.ajaxmenu').livequery('click',function(){
3 $("#contenido").html(ajax_load).load(loadUrl);

4 return false;
5 });

¿Cómo Hago Funcionar El Código Si Uso Anclas?
Esto es más complicado ya que hay que calcular la ubicación de las anclas y generar un scroll
3 $.ajaxSetup ({
4 cache: false
5 });
6 var ajax_load = "<img src='img/load.gif' alt='loading...' />";
7 $(".ajaxmenu").live("click", function(){
8 myUrl= $(this).attr('href');
9 if (myUrl.match('#')) {
10 var myAnchor = myUrl.split('#')[1];
11 /*Ahora arreglamos el URL - para evitar problemas en ie6*/
12 var loadUrl = myUrl.split('#')[0];
13 }else{
15 }
16 $("#contenido").html(ajax_load).load(loadUrl,function(){
17 if (myUrl.match('#')) {
18 /*Calculamos la distancia entre el anchor y la pagina y animamos*/
19 var targetOffset = $("a[name='"+myAnchor+"']").offset().top;
20 $('html').animate({scrollTop: targetOffset}, 400);
21 }
22 }
23 );
24 return false;
25 });
26 });
27 </script>

SLIDER CONTENIDO DESTACADO

He visto varios sliders en jquery con/sin easing, con muchos efectos y otras cosas pero siempre me han
gustado mas esos sliders flash que hay en ciertos blogs de noticias u otros donde se muestra un banner
con contenido último o destacado incluyendo un texto y algún link, muy util para resaltar algún post.
Este script jquery justamente permite mostrar contenido destacado en un slider incluyendo una
descripción con su respectivo link

featured-content-jquery
Podemos ver como implementarlo desde su web

VENTANA MODAL
Podríamos programar una ventana modal desde cero pero es mucho más fácil si usamos algún plugin de
jquery, para eso vamos a usar Simple Modal

Primero incluimos jquery y el plugin simple modal en nuestra cabecera
1 <script type="text/javascript" src="jquery.js"></script>
2 <script type="text/javascript" src="jquery.simplemodal-1.3.min.js "></script>

Luego debemos elegir que elementos deben ser afectados por simplemodal usando los selectores de
jquery, con lo que podría quedar asi:
1 $("#sample").modal();

O podriamos incluir algunos parámetros adicionales como por ejemplo cambiar el color de fondo y la
opacidad
1 $("#sample").modal({
2 overlay:80,
3 overlayCss: {backgroundColor:"#fff"}
4 });

Existen opciones más avanzadas como animaciones uso de iframes entre otras su pagina web

AGREGAR BORRAR CAMPOS
Seguro hemos visto algunas páginas ajax en las que piden por ejemplo correo luego podemos apretar un
botón “añadir” y se agrega un campo más para insertar un nuevo correo y así cuantos deseemos; también
hay algunos más complicados en los que puedes añadir por ejemplo detalles de tu experiencia laboral en
un curriculum.

La idea es los casos mencionados es exactamente la misma (campos más, campos menos) veremos
cómo funciona la más sencilla, para ello debemos tener claros algunos conceptos previos.

Arrays De Controles HTML
Como no sabemos cuantos campos quiera añadir el usuario, debemos estar preparados para recibir
cualquier cantidad de datos por lo cual vamos a usar un array de controles como este:
1 <input type="text" size="20" name="email[]">
Lo único distinto con cualquier otro control es que al final del nombre uso unos corchetes.

Manejando Arrays De Controles Con PHP
Normalmente en PHP los campos recibidos llegan con POST o GET según corresponda y podemos
manejarlo directamente pero con los arrays se manejan un poco distinto, algo así:
1 <?php
2 $emails=$_POST['email'];
3 for ($i=0; $i<=count($emails); $i++) {
4 echo $emails[$i].'<br>';
5 }
6 ?>

¿Cómo Agregar Campos?
Para esto voy a usar un link que invoque a una función javascript que agrega el campo adicional
1 <a href="#" onclick="agregar();">Agregar</a>

La función usando jquery es muy sencilla basta usar “attend” para que al final agregue un campo adicional
2 function agregar() {
3 campo = '<li><label>Email:</label><input type="text" size="20" name="email[]" /></li>';
4 $("#emails").append(campo);
5 }
6 </script>

El tema de la presentación o de usar alguna imagen ya depende de nuestra hoja de estilos aunque en
este ejemplo he usado un sólo campo es posible usando el mismo código para añadir bloques completos
de campos.

para borrar un campo específico, pues es muy simple en realidad, veamos:

Agregando Campos
Necesitamos hacer que se agreguen campos pero además que estos aparezcan con un link que nos
permita borrarlos, además para poder identificarlos vamos a ponerle un contador.
emails=0;
1
function agregar() {
2
emails=emails+1;
3
$("#campos").append('<li class="email'+emails+'"><input type="text" name="email[]" size="25"
4
/>  <a href="#" onclick="javascript:borrar('+emails+');">Borrar</a></li>');
5
}

De esta forma se creará un li con una clase email1, email2, email3, etc. y un link con un javascript que
invoca a la función borrar(1), borrar(2), etc.

Borrando Los Campos
La función que borra los campos que ya no requerimos es muy simple, únicamente un selector jquery que
busca la clase email1, email2… o la que corresponda y con remove se elimina, ese return false evita que
“salte” la página cuando le damos click al link borrar.
1 function borrar(cual) {
2 $("li.email"+cual).remove();
3 return false;
4 }
Como ven con sólo un par de líneas ya está funcionando.

MODIFICANDO ATRIBUTOS
Veamos ahora como modificar atributos de algún elemento de nuestra página web, primero a modo de
introducción veremos cómo funcionan los selectores en jquery y luego veamos como capturar y/o
modificar atributos.

Selectores En Jquery
Los selectores de jquery funcionan igual que los selectores de javascrip para elegir objetos (div, p,
input…), clases(.miclase) o id(#miid),

por ejemplo para seleccionar un DIV
1 <div id="midiv"></div>

Para elegirlo usaríamos en javascript
1 var midiv1 = $("#midiv");

Tomando Los Valores De Un Atributo
Ahora que sabemos cómo elegir un objeto veamos como recoger el valor de cualquiera de sus atributos
1 var titulo = $("a.milink").attr("title");
2 var alt = $("img").attr("alt");
3 var valor = $("#mitexto").attr("value");

Modificando Atributos De Un Elemento
Hay 2 formas de hacerlo, la primera es mejor cuando se trata de modificar un solo atributo mientras que la
segunda sirve para recoger múltiples atributos

Deshabilita un boton
1 $("#miboton").attr("disabled","disabled");

Cambia la imagen a miimagen.gif además cambia el titulo y el texto alternativo (ALT)
1 $("img").attr({
2 src: "/images/miimagen.gif",
3 title: "jQuery",
4 alt: "jQuery Logo"
5 });
Como ven es muy fácil modificar los atributos de cualquier elemento, esto combinado con eventos
podríamos hacer que aparezcan o desaparezcan opciones, se habiliten botones, se oculten DIV
completos, se muestren mensajes de alerta y un largo etc.

JQUERY MUSIC PLAYER
Este es un muy interesante plugin para jquery que nos permite reproducir música usando HTML y Flash
muy fácil de implementar y lo más importante es que es muy liviano además de personalizable usando
CSS.

Veamos algunas de sus características
Permite reproducir y controlar archivos de música (incluso listas de reproducción)
100% personalizable usando HTML y CSS
Rápido stream
Soporta MP3 y OGG
Pueden descargarlo AQUI

OCULTAR /MOSTRAR SECCIONES DE NUESTRO SITIO
Como hacer aparecer secciones de un formulario o cualquier otro elemento de nuestro sitio usando
jquery, perfecto para cuando tenemos un formulario de búsqueda y deseamos mostrar opciones de
búsqueda avanzada por ejemplo o también es posible usarlo a modo de acordeón.

Ocultar Un Elemento
Si bien es cierto que podemos ocultar un elemento cualquiera lo mejor es colocar un div que agrupe el
elemento o elementos que deseamos ocultar si es un formulario y estas basado en una estructura de
OL/UL y LI le asignamos u ID a es LI que deseamos ocultar, nuestro código sería algo así:
1 <div id="paraocultar">
2 <p>Aqui el texto o elementos del formulario que se ocultarán</p>
3 </div>
4 <p>Para ocultar podemos usar link o un boton</p>
5 <a id="oculta">Click para ocultarlo</a>

Nuestro código jquery para detectar que se ha hecho click sería:
2 estado=0;
3 $("#oculta").click(function () {
4 if(estado==0) {
5 $('#paraocultar').slideUp('fast');
6 estado=1;
7 } else {
8 $('#paraocultar').slideDown('fast');
9 estado=0;
10 }
11 });
12 });

Jquery para principianes

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Jquery para principianes

Similar to Jquery para principianes (20)

More from Mauro Gomez Mejia

More from Mauro Gomez Mejia (20)

Recently uploaded

Recently uploaded (20)

Jquery para principianes